<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="/static/js/jquery.js" ></script>
    <script type="text/javascript" >
        var selfid1 = "";
        var ws = new WebSocket("ws://8.140.176.145:9999/talk");
        ws.onopen = function(){
            ws.send(JSON.stringify({"type":"init"}))
            ws.send(JSON.stringify({"type":"list"}))
        };
        ws.onmessage = function (evt){
            var data = evt.data;
            var j1 = JSON.parse(data);
            var newid = j1.newid;
            var idlist = j1.idlist;
            var to = j1.to;
            var msg = j1.msg;
            var selfid = j1.selfid;
            if (selfid != undefined){
                $("#selfid").html(selfid);
                selfid1 = selfid;
                return;
            }
            if (to != undefined && msg != undefined){
                $("#selfid").html($("#selfid").html() + "<p /><span>"+to+"<p />："+msg+"</span><p />");
                return;
            }
            if (idlist != undefined){
                for (var i = 0;i < idlist.length;i++){
                    if (idlist[i] == selfid1){
                        continue
                    }
                    var opt = "<option id=\""+idlist[i]+"\" >"+idlist[i]+"</option>";
                    $("#tos").append(opt);
                }
                return;
            }
            if (newid != undefined){
                var opt = "<option id=\""+newid+"\" >"+newid+"</option>";
                $("#tos").append(opt);
            }
        };
        function sendmsg() {
            var m1 = $("#inputs").val()
            var to = $("#tos").val()
            $("#selfid").html($("#selfid").html() + "<p /><span>"+to+"<p />："+m1+"</span><p />");
            ws.send(JSON.stringify({"type":"talk","msg":JSON.stringify({"to":to,"msg":m1})}))
        }
    </script>
</head>
<body>
    <span>我是：</span>
    <span id="selfid" ></span>
    <p />
    <div id="msgs" ></div>
    <p />
    <input type="text" id="inputs" />
    <p />
    <span>发送给：</span>
    <select id="tos" >
        <option id="请选择" >...</option>
    </select>
    <p />
    <input type="button" value="发送" onclick="sendmsg()" />
</body>
</html>